<template>
  <!-- 添加好友的对话框 -->
  <a-modal
    class="add-friend-modal"
    title="添加好友"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @cancel="handleCancel"
    footer=""
  >
    <div class="input-container">
      <span>用户ID:</span>
      <input type="text" v-model="userId" placeholder="请输入用户ID" />
    </div>
    <div class="input-container">
      <span>添加好友说明:</span>
      <input type="text" v-model="content" placeholder="请输入添加好友说明" />
    </div>
    <div class="modal-footer">
      <a-button class="cancel-button" @click="handleCancel">取消</a-button>
      <a-button class="submit-button" type="primary" :loading="confirmLoading" @click="handleOk">提交</a-button>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { api_addFriendReq } from '@/api/friendRequest'
import { reactive, toRefs } from 'vue'
import { defineComponent } from 'vue'
import { message } from 'ant-design-vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'AddFriendModal',
  setup() {
    const store = useStore()
    const state = reactive({
      userId: '',
      content: '',
      visible: false,
      confirmLoading: false,
    })

    // methods
    const showModal = () => {
      state.visible = true
    }

    const handleCancel = () => {
      state.visible = false
    }

    const handleOk = async () => {
      if (!state.userId.trim()) {
        message.warning('用户ID不能为空哦!')
        return
      }

      state.confirmLoading = true

      try {
        let res = await api_addFriendReq({
          friendId: state.userId.trim(),
          content: state.content.trim() || `你好, 我是${store.state.userInfo.userName}`,
        })
        if (res) {
          message.success('请求发送成功!')
        } else {
          message.error('请求发送失败!')
        }
      } catch (error) {
        message.error('请求发送失败!')
      }

      state.userId = ''
      state.content = ''
      state.visible = false
      state.confirmLoading = false
    }

    return {
      ...toRefs(state),
      showModal,
      handleCancel,
      handleOk,
    }
  },
})
</script>

<style scoped>
.add-friend-modal .ant-modal-content {
  border-radius: 10px;
  padding: 20px;
  background: #1eade5;
}

.add-friend-modal .ant-modal-header {
  border-bottom: none;
  padding-bottom: 0;
  background: #4caf50;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.add-friend-modal .ant-modal-title {
  color: #fff;
  font-size: 18px;
}

.add-friend-modal .ant-modal-footer {
  border-top: none;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  background: #f5f5f5;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.input-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.input-container span {
  display: inline-block;
  width: 100px;
  font-size: 14px;
  color: #333;
}

input[type="text"] {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

input[type="text"]:focus {
  outline: none;
  border-color: #4caf50;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.modal-footer a-button {
  margin-left: 10px;
}

.cancel-button {
  background-color: #c2fbd7;
  border-radius: 50px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: green;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

}

.cancel-button:hover {
  box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
}

.submit-button {
  background-color: #c2fbd7;
  border-radius: 50px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: green;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

}

.submit-button:hover {
  box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
}
</style>
